<template>
  <div class="home">
    <waved-ball
      class="ball"
      :rate="rate"
      :bSize="120"
      :waveColor="'Thistle'"
      :fontColor="'#8B008B'"
      :fontSize="28"
    >
    </waved-ball>
    <div @click.self="dayin('1111')" ref="test">
      最外层的div---{{ msg }}
      <div @click="dayin('22222')">
        第二层的div
        <input v-model.lazy="value" @click.once="dayin('input点击了')" />
      </div>
    </div>
    <button v-copy="value">复制</button>
    <button @click="testApi">ceshi</button>
    <button @click="testApiPost">ceshi--post</button>
  </div>
</template>

<script>
// @ is an alias to /src
import WavedBall from "@/components/waved_ball.vue";
import { api } from "@/utils/api";

export default {
  name: "Home",
  components: {
    WavedBall,
  },
  data() {
    return {
      rate: 0.6,
      value: "",
      msg: "测试文本",
    };
  },
  methods: {
    dayin(str) {
      console.log(str);
    },
    async testApi() {
      const res = await api("/111", "get", {
        retry: 3,
        retryDelay: 2000,
      });
      console.log(res);
    },
    async testApiPost() {
      const data = {
        method: "post",
        num: 2,
      };
      const res = await api("/222", "post", { data });
      console.log(res);
    },
  },
  mounted() {
    this.msg = "ceshiwenben";
  },
};
</script>
